<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=Edge,chrome=1">
    <meta name="renderer" content="webkit">
    <link rel="stylesheet" type="text/css" href="http://apps.bdimg.com/libs/bootstrap/3.3.4/css/bootstrap.css">
    <script type="text/javascript" src="../common/jquery-3.7.1.js"></script>
    <title>料车显示屏</title>
    <style>
        body {
            font-family: Arial, sans-serif;
            background-color: #2B2B35;
            margin: 0;
            height: 100vh;
            width: 100%;
        }

        .container {
            width: 100%;
            height: 100%;
            margin: 0 auto;
            background: #26262E;
            padding: 1.5vh;
            box-shadow: 0 0 1.2vh rgba(0, 0, 0, 0.1);
            overflow: hidden;
            color: white;
        }

        .stats {
            display: flex;
            justify-content: space-between;
            align-items: center;
            margin-bottom: 0.5vh;
            font-size: 0.9vw;
            height: 4vh;
        }

        .vehicle-id p {
            margin: 0.5vw;
        }

        .stats-info {
            display: flex;
            justify-content: flex-end;
            align-items: center;
        }

        .stats-info p {
            margin: 0 0.5vw;
        }

        #shelf {
            display: flex;
            gap: 2.5vh;
            height: calc(100% - 2vh);
            font-size: 0.8vw;
            overflow: hidden;
        }

        .layer {
            flex: 1;
            border: 0.1vh solid #383B44;
            padding: 1.6vh;
            background-color: #2B2B35;
            display: flex;
            flex-direction: column;
            height: calc(100% - 2.4vh);
            overflow: hidden;
            border-radius: 10px;
        }

        .layer-header {
            display: flex;
            justify-content: space-between;
            align-items: center;
            margin-bottom: 1.2vh;
        }

        .layer-header span {
            margin: 0;
        }

        .separator {
            border: none;
            height: 0.1vh;
            background-color: #3F414E;
            margin: 1.2vh 0;
        }

        .tabs {
            margin-top: 1.2vh;
            white-space: nowrap;
            overflow-x: auto;
            /* 允许水平滚动 */
            overflow-y: hidden;
            scrollbar-width: none;
            /* 隐藏滚动条（适用于 Firefox） */
            -ms-overflow-style: none;
            /* 隐藏滚动条（适用于 IE 和 Edge） */
        }

        .tabs::-webkit-scrollbar {
            display: none;
            /* 隐藏滚动条（适用于 Chrome、Safari 等） */
        }

        .tab-button {
            padding: 0.6vh 1.2vh;
            margin-right: 0.6vh;
            cursor: pointer;
            background-color: #323546;
            display: inline-block;
        }

        .tab-button.active {
            background-color: #4169FF;
            border: 2px solid #64BEFC;
        }

        .tab-content {
            flex: 1;
            overflow: hidden;
            position: relative;
        }

        table {
            width: 100%;
            border-collapse: collapse;
            margin-top: 1.2vh;
            border: none;
        }

        th,
        td {
            padding: 1vh;
            text-align: center;
            border: none;
        }

        thead {
            display: table;
            width: 100%;
            table-layout: fixed;
        }

        tbody {
            display: block;
            max-height: 73vh;
            overflow: hidden;
            position: relative;
        }

        tbody tr {
            display: table;
            width: 100%;
            table-layout: fixed;
        }
    </style>
</head>

<body>
    <div class="container">
        <div class="stats">
            <div class="vehicle-id">
                <p>料车编号: <span id="vehicle-id">001</span></p>
            </div>
            <div class="stats-info">
                <p>AO总数: <span id="ao-total">0</span></p>
                <p>物料总数: <span id="material-total">0</span></p>
                <p>物料总数量: <span id="material-quantity-total">0</span></p>
            </div>
        </div>
        <div id="shelf"></div>
    </div>

    <script type="text/javascript">
        document.addEventListener('DOMContentLoaded', function () {
            const shelfContainer = document.getElementById('shelf');
            const aoTotal = document.getElementById('ao-total');
            const materialTotal = document.getElementById('material-total');
            const materialQuantityTotal = document.getElementById('material-quantity-total');

            function generateRandomData(numLayers) {
                const aircraftParts = [
                    { code: 'A101', name: '机翼' },
                    { code: 'A102', name: '机身' },
                    { code: 'A103', name: '发动机' },
                    { code: 'A104', name: '起落架' },
                    { code: 'A105', name: '尾翼' },
                    { code: 'A106', name: '驾驶舱' },
                    { code: 'A107', name: '雷达' },
                    { code: 'A108', name: '导航系统' },
                    { code: 'A109', name: '武器系统' },
                    { code: 'A110', name: '通信系统' },
                    { code: 'A111', name: '液压系统' },
                    { code: 'A112', name: '电气系统' },
                    { code: 'A113', name: '燃油系统' },
                    { code: 'A114', name: '刹车系统' },
                    { code: 'A115', name: '导航灯' },
                    { code: 'A116', name: '仪表盘' },
                    { code: 'A117', name: '座椅' },
                    { code: 'A118', name: '救生衣' },
                    { code: 'A119', name: '氧气面罩' },
                    { code: 'A120', name: '灭火器' },
                    { code: 'A121', name: '滑油系统' },
                    { code: 'A122', name: '空调系统' },
                    { code: 'A123', name: '防冰系统' },
                    { code: 'A124', name: '导航设备' },
                    { code: 'A125', name: '通信设备' },
                    { code: 'A126', name: '雷达设备' },
                    { code: 'A127', name: '武器设备' },
                    { code: 'A128', name: '液压设备' },
                    { code: 'A129', name: '电气设备' },
                    { code: 'A130', name: '燃油设备' }
                ];

                const layers = [];

                for (let i = 0; i < numLayers; i++) {
                    const hasTray = Math.random() < 0.8; // 80% 的概率有托盘
                    let trayNumber = hasTray ? `T${Math.floor(Math.random() * 10000).toString().padStart(4, '0')}` : null;

                    if (trayNumber) {
                        const numAOs = Math.floor(Math.random() * 7) + 2; // 2 到 8 个 AO
                        const AOs = [];

                        for (let j = 0; j < numAOs; j++) {
                            const aoId = `AO${Math.floor(Math.random() * 10000).toString().padStart(4, '0')}`;
                            const numMaterials = Math.floor(Math.random() * 30) + 1; // 1 到 30 种物料
                            const materials = [];

                            for (let k = 0; k < numMaterials; k++) {
                                const randomPart = aircraftParts[Math.floor(Math.random() * aircraftParts.length)];
                                const quantity = Math.floor(Math.random() * 50) + 1; // 1 到 50 个数量

                                materials.push({
                                    code: randomPart.code,
                                    name: randomPart.name,
                                    quantity: quantity
                                });
                            }

                            AOs.push({
                                id: aoId,
                                materials: materials
                            });
                        }

                        layers.push({
                            trayNumber: trayNumber,
                            AOs: AOs
                        });
                    } else {
                        layers.push({
                            trayNumber: null,
                            AOs: []
                        });
                    }
                }

                return { layers: layers };
            }

            let data = generateRandomData(5); // 生成 5 层数据

            let intervalAO;
            let intervalFullRefresh;

            function enableTabDragging(tabsDiv) {
                let isDragging = false;
                let startX, scrollLeft;

                tabsDiv.addEventListener('mousedown', (e) => {
                    isDragging = true;
                    startX = e.pageX - tabsDiv.offsetLeft;
                    scrollLeft = tabsDiv.scrollLeft;
                });

                tabsDiv.addEventListener('mouseleave', () => {
                    isDragging = false;
                });

                tabsDiv.addEventListener('mouseup', () => {
                    isDragging = false;
                });

                tabsDiv.addEventListener('mousemove', (e) => {
                    if (!isDragging) return;
                    e.preventDefault();
                    const x = e.pageX - tabsDiv.offsetLeft;
                    const walk = (x - startX) * 2; // 调整滚动速度
                    tabsDiv.scrollLeft = scrollLeft - walk;
                });
            }

            function renderShelf() {
                shelfContainer.innerHTML = '';
                let totalAO = 0;
                let totalMaterial = 0;
                let totalQuantity = 0;

                data.layers.forEach((layer, index) => {
                    const layerDiv = document.createElement('div');
                    layerDiv.className = 'layer';
                    if (layer.trayNumber) {
                        const layerHeader = document.createElement('div');
                        layerHeader.className = 'layer-header';
                        layerHeader.innerHTML = `
                    <span>第${index + 1}层</span>
                    <span>托盘编号: ${layer.trayNumber}</span>
                `;
                        layerDiv.appendChild(layerHeader);

                        const separator = document.createElement('hr');
                        separator.className = 'separator';
                        layerDiv.appendChild(separator);

                        const tabsDiv = document.createElement('div');
                        tabsDiv.className = 'tabs';
                        const contentDiv = document.createElement('div');
                        contentDiv.className = 'tab-content';

                        layer.AOs.forEach((ao, aoIndex) => {
                            const button = document.createElement('button');
                            button.className = 'tab-button' + (aoIndex === 0 ? ' active' : '');
                            button.textContent = ao.id;
                            button.addEventListener('click', () => switchTab(contentDiv, layer.AOs, aoIndex));
                            tabsDiv.appendChild(button);
                        });

                        if (layer.AOs.length > 0) {
                            renderAOContent(contentDiv, layer.AOs[0]);
                        }

                        layerDiv.appendChild(tabsDiv);
                        layerDiv.appendChild(contentDiv);
                        totalAO += layer.AOs.length;
                        layer.AOs.forEach(ao => {
                            totalMaterial += ao.materials.length;
                            totalQuantity += ao.materials.reduce((sum, material) => sum + material.quantity, 0);
                        });

                        // 启用选项卡拖动功能
                        enableTabDragging(tabsDiv);
                    } else {
                        layerDiv.innerHTML = `<strong>第${index + 1}层 - 无托盘</strong>`;
                    }
                    shelfContainer.appendChild(layerDiv);
                });

                aoTotal.textContent = totalAO;
                materialTotal.textContent = totalMaterial;
                materialQuantityTotal.textContent = totalQuantity;
            }

            function renderAOContent(contentDiv, ao) {
                contentDiv.innerHTML = '';
                const table = document.createElement('table');
                const thead = document.createElement('thead');
                const tbody = document.createElement('tbody');

                thead.innerHTML = `
                    <tr>
                        <th style="width: 35%;">物料名称</th>
                        <th style="width: 35%;">物料编码</th>
                        <th style="width: 30%;">物料数量</th>
                    </tr>
                `;

                ao.materials.forEach(material => {
                    const row = document.createElement('tr');
                    row.innerHTML = `
                        <td style="width: 35%;">${material.name}</td>
                        <td style="width: 35%;">${material.code}</td>
                        <td style="width: 30%;">${material.quantity}</td>
                    `;
                    tbody.appendChild(row);
                });

                table.appendChild(thead);
                table.appendChild(tbody);
                contentDiv.appendChild(table);

                // 启动动画滚动
                startAutoScroll(tbody);
            }

            function startAutoScroll(tbody) {
                let scrollInterval;
                const scrollSpeed = 1; // 滚动速度（像素/帧）
                const scrollDelay = 30; // 滚动间隔（毫秒）

                scrollInterval = setInterval(() => {
                    if (tbody.scrollTop + tbody.clientHeight >= tbody.scrollHeight) {
                        setTimeout(() => {
                            tbody.scrollTop = 0;
                        }, 800);
                    } else {
                        tbody.scrollTop += scrollSpeed; // 向下滚动
                    }
                }, scrollDelay);
            }

            function switchTab(contentDiv, AOs, index) {
                const buttons = contentDiv.parentElement.querySelectorAll('.tab-button');
                buttons.forEach((button, i) => button.classList.toggle('active', i === index));
                renderAOContent(contentDiv, AOs[index]);

                // 获取当前选中的标签页按钮
                const selectedButton = buttons[index];
                const tabsDiv = contentDiv.parentElement.querySelector('.tabs');

                // 计算按钮的位置
                const buttonRect = selectedButton.getBoundingClientRect();
                const tabsRect = tabsDiv.getBoundingClientRect();

                // 如果按钮在容器的左侧之外
                if (buttonRect.left < tabsRect.left) {
                    tabsDiv.scrollLeft -= (tabsRect.left - buttonRect.left);
                }
                // 如果按钮在容器的右侧之外
                else if (buttonRect.right > tabsRect.right) {
                    tabsDiv.scrollLeft += (buttonRect.right - tabsRect.right);
                }
            }

            function refreshData() {
                data = generateRandomData(5); // 重新生成 5 层数据
                renderShelf();
            }

            function startIntervalAO() {
                intervalAO = setInterval(() => {
                    const layers = document.querySelectorAll('.layer');
                    layers.forEach(layer => {
                        const tabs = layer.querySelector('.tabs');
                        if (tabs) {
                            const buttons = tabs.querySelectorAll('.tab-button');
                            const currentIndex = Array.from(buttons).findIndex(button => button.classList.contains('active'));
                            const nextIndex = (currentIndex + 1) % buttons.length;
                            buttons[nextIndex].click();
                        }
                    });
                }, 15000);
            }

            function startIntervalFullRefresh() {
                intervalFullRefresh = setInterval(() => {
                    refreshData();
                }, 300000);
            }

            // 初始化渲染
            refreshData();
            startIntervalAO();
            startIntervalFullRefresh();
        });
    </script>
</body>

</html>